<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>八里沟云生态平台</title>
<meta name="keywords" content="">
<meta name="description" content="">
<script src="./lib/jquery.min.js"></script>
<script src="./lib/lodash.min.js"></script>
<script src="./lib/echarts.min.js"></script>
<script src="./lib/soda.js"></script>
<script src="./js/comon.js"></script>
<link rel="stylesheet" type="text/css" href="./css/common.css">
<link rel="stylesheet" type="text/css" href="./css/bot.css">
<script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=DvG5p5CZvkrtjRGDdGmaGX3ZfqYWvt9X"></script>
<script type="text/javascript"
        src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

</head>
<body>
<div class="pagemain page11">
    <div class="center-main">
        <div class="page-top-tab-nav">
            <ul>
                <li class="current"><a href="hudong-yuyin.html">语音画册</a></li>
                <!-- <li ><a href="hudong-H5.html">互动H5数据分析</a></li> -->
            </ul>
        </div>
        <div class="cenbg">
            <div class="vlist">
                <ul class="z-hide" id="time">
                    <li>
                        <p class="p1">累计播放时长</p>
                        <p class="p2">{{total_play_duration.hours}}'{{total_play_duration.minutes}}''{{total_play_duration.seconds}}</p>
                    </li>
                    <li>
                        <p class="p1">今年播放时长</p>
                        <p class="p2">{{year_play_duration.hours}}'{{year_play_duration.minutes}}''{{year_play_duration.seconds}}</p>
                    </li>
                    <li>
                        <p class="p1">本月播放时长</p>
                        <p class="p2">{{month_play_duration.hours}}'{{month_play_duration.minutes}}''{{month_play_duration.seconds}}</p>
                    </li>
                    <li>
                        <p class="p1">今日播放时长</p>
                        <p class="p2">{{today_play_duration.hours}}'{{today_play_duration.minutes}}''{{today_play_duration.seconds}}</p>
                    </li>
                    <li>
                        <p class="p1">累计播放次数</p>
                        <p class="p2">{{total_play_times}}</p>
                    </li>
                    <li>
                        <p class="p1">今年播放次数</p>
                        <p class="p2">{{year_play_times}}</p>
                    </li>
                    <li>
                        <p class="p1">本月播放次数</p>
                        <p class="p2">{{month_play_times}}</p>
                    </li>
                    <li>
                        <p class="p1">今日播放次数</p>
                        <p class="p2">{{today_play_times}}</p>
                    </li>
                </ul>

                <ul id="detail">
                    <li>
                        <p class="p1">累计播放时长</p>
                        <p class="p2">15'0''31</p>
                    </li>
                    <li>
                        <p class="p1">今年播放时长</p>
                        <p class="p2">15'0''31</p>
                    </li>
                    <li>
                        <p class="p1">本月播放时长</p>
                        <p class="p2">15'0''31</p>
                    </li>
                    <li>
                        <p class="p1">今日播放时长</p>
                        <p class="p2">1'0''31</p>
                    </li>
                    <li>
                        <p class="p1">累计播放次数</p>
                        <p class="p2">691</p>
                    </li>
                    <li>
                        <p class="p1">今年播放次数</p>
                        <p class="p2">691</p>
                    </li>
                    <li>
                        <p class="p1">本月播放次数</p>
                        <p class="p2">456</p>
                    </li>
                    <li>
                        <p class="p1">今日播放次数</p>
                        <p class="p2">1</p>
                    </li>
                </ul>
            </div>
            <div class="mid">
                <div class="mapcon">
                    <div class="wrap" id="baidumap">

                    </div>
                    <!-- <div class="maptype1 d bmap-wrap" id="mapTypeBtn">
                        <div class="btn" go="maptype1"></div>
                        <div class="btn" go="maptype2"></div>
                    </div> -->
                </div>
                <div class="bot">
                    <div class="time-filter">
                        <div class="name">日期：</div>
                        <div class="inp"><input type="text" id="tic-start" autocomplete="off" readonly></div>
                        <div class="to">至</div>
                        <div class="inp"><input type="text" id="tic-end" autocomplete="off" readonly></div>
                        <div class="btn" id="search">查询</div>
                    </div>
                    <div class="chartcon c1" id="tingqucishu">

                    </div>
                    <div class="chartcon c2" id="tingqubili">

                    </div>
                </div>

            </div>
            <div class="rank">
                <div class="box c1">
                    <ul class="z-hide" id="ranking">
                        <li>
                            <div class="ico">1</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">2</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">3</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">4</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">5</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">6</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">7</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">8</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">9</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">10</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">1</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">2</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">3</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">4</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">5</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">6</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">7</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">8</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">9</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                        <li>
                            <div class="ico">10</div>
                            <div class="name">河南</div>
                            <div class="num">589484</div>
                        </li>
                    </ul>
                    <ul id="detail2">  <li>
                        <div class="ico">1</div>
                        <div class="name">新乡八里沟</div>
                        <div class="num">111</div>
                    </li><li>
                        <div class="ico">2</div>
                        <div class="name">天河瀑布</div>
                        <div class="num">84</div>
                    </li><li>
                        <div class="ico">3</div>
                        <div class="name">老子布道</div>
                        <div class="num">66</div>
                    </li><li>
                        <div class="ico">4</div>
                        <div class="name">红石河</div>
                        <div class="num">55</div>
                    </li><li>
                        <div class="ico">5</div>
                        <div class="name">抱犊桥将军潭</div>
                        <div class="num">55</div>
                    </li><li>
                        <div class="ico">6</div>
                        <div class="name">玉皇宫</div>
                        <div class="num">36</div>
                    </li><li>
                        <div class="ico">7</div>
                        <div class="name">仙人迎客峰</div>
                        <div class="num">35</div>
                    </li><li>
                        <div class="ico">8</div>
                        <div class="name">桃花湾</div>
                        <div class="num">34</div>
                    </li><li>
                        <div class="ico">9</div>
                        <div class="name">西莲寺</div>
                        <div class="num">33</div>
                    </li><li>
                        <div class="ico">10</div>
                        <div class="name">静心潭</div>
                        <div class="num">32</div>
                    </li><li>
                        <div class="ico">11</div>
                        <div class="name">桃花湾瀑布桃花潭</div>
                        <div class="num">31</div>
                    </li><li>
                        <div class="ico">12</div>
                        <div class="name">归真台</div>
                        <div class="num">30</div>
                    </li><li>
                        <div class="ico">13</div>
                        <div class="name">救帝桑</div>
                        <div class="num">28</div>
                    </li><li>
                        <div class="ico">14</div>
                        <div class="name">天梯</div>
                        <div class="num">23</div>
                    </li><li>
                        <div class="ico">15</div>
                        <div class="name">一线天</div>
                        <div class="num">21</div>
                    </li><li>
                        <div class="ico">16</div>
                        <div class="name">云峰画廊</div>
                        <div class="num">19</div>
                    </li><li>
                        <div class="ico">17</div>
                        <div class="name">老爷顶</div>
                        <div class="num">17</div>
                    </li><li>
                        <div class="ico">18</div>
                        <div class="name">猕猴保护区</div>
                        <div class="num">15</div>
                    </li><li>
                        <div class="ico">19</div>
                        <div class="name">如画台</div>
                        <div class="num">15</div>
                    </li><li>
                        <div class="ico">20</div>
                        <div class="name">回龙挂壁</div>
                        <div class="num">14</div>
                    </li></ul>
                    
                </div>
            </div>

        </div>


    </div>
</div>

<script src="./lib/dyw.min.js"></script>
<script src="./lib/laydate/laydate.js"></script>
<script src="./js/yuyinhuace_page.js"></script>
<script src="./js/yuyinhuace_map.js"></script>
<!-- <script src="data/yuyinhuace_page.json?callback=list"></script> -->
<script>
 $(function () {
     var ticstart = {
         elem: '#tic-start',
         format: 'yyyy-MM-dd',
         max: 0, 
         min: "2019-09-15 00:00:00",
         choose: function (datas) {
             ticend.min = datas; //开始日选好后，重置结束日的最小日期
         }
     };
     var ticend = {
         elem: '#tic-end',
         format: 'yyyy-MM-dd',
         max: 0, 
         min: "2019-09-15 00:00:00",
         choose: function (datas) {
             ticstart.max = datas; //结束日选好后，重置开始日的最大日期
         }
     };

     laydate.render(ticstart);
     laydate.render(ticend);

 })
</script>

</body>
</html>